<template>
	<view>
		<view class="content">
			<z-paging ref="paging" :refresher-only="true" :fixed="false" @query="getTopNumsData">
				<template #top>
					<!-- 悬浮按钮 -->
					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="dragBtnClick">
						<template #BtnContent>
							<u-icon name="info-circle" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
					
					<u-navbar :fixed="false" title="看板" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
						<view slot="right">
							<!-- <uni-data-checkbox mode="tag" v-model="ChoiceData"
								:localdata="radioOptions"></uni-data-checkbox> -->


							<m-dropdown-menu :options="radioOptions" v-model="ChoiceData" KeyID="searchMenu"
								marginTop="10" zIndex="999999" @selectItem="ChoiceCell">
								<template #default="{element}">
									<!-- <view class="x-f MenuText" :style="{color: element ? '#3d9edf' : '#fff'}"> -->
									<view class="x-f MenuText" style="color:#fff;">
										<text>{{ChoiceData['text']}}</text>
										<u-icon :name="element ? 'arrow-up-fill':'arrow-down-fill'" color="#fff"
											size="10" style="margin-left: 4px;"></u-icon>
									</view>

								</template>
							</m-dropdown-menu>
						</view>
					</u-navbar>

					<!-- 时间选择器 -->
					<view class="example-body">
						<uni-datetime-picker v-model="singleTimes" @maskClick="PickerIndex = 1"
							@show="PickerIndex = 99999999999" :style="{'z-index':PickerIndex}" @change="ChangeDate"
							type="daterange" :end="EndDate" rangeSeparator="至"></uni-datetime-picker>
					</view>
				</template>

				<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
				<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->

				<view class="MainBox">
					<view class="x-bc">
						<view class="ItemCard" v-for="item in ModleList" :key="item.id" @click="openPermissionDialog">

							<u-icon size="50rpx" :name="item.Icon"></u-icon>

							<text style="margin-top: 16rpx;font-size: 34rpx;font-weight: 600;">{{item.ShowText}}</text>

							<text style="margin-top: 16rpx;font-size: 20rpx;color: #999;">{{item.Text}}</text>
						</view>
					</view>

					<!-- 消息滚动 -->
					<view @click="openBroadcastPopup">
						<m-carousel-roll :list="RollList" emptyText="暂无播报"
							style="border-radius: 12px;margin-top: 24rpx;padding-left: 18rpx;"
							:title-item-style="{'font-size':'32rpx'}">
							<template v-slot:customLeft>
								<view class="my-custom-text-style x-f"
									style="background-color: #fff3f5;border-radius: 10px;justify-content: center;padding: 4px;">
									<u-icon name="volume-fill" color="#ff8e62" size="34rpx"></u-icon>
								</view>
							</template>
						</m-carousel-roll>
					</view>

					<!-- 完成数量统计 -->
					<view class="CommonCardBox">
						<view class="CommonCard_TopBox">
							<u-cell title="完成数量统计" :border="false"
								:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
								<view slot="icon">
									<view class="CommonCard_TitleLeftIcon FinishIconBac">
										<u-icon size="32rpx" name="/static/image/Icon/FinishNum.png"></u-icon>
									</view>
								</view>

								<!-- <view slot="value" class="u-slot-value x-f CommonCard_RightBox">
									<text class="Text">查看</text>
									<u-icon name="arrow-right" color="#51d0d0" size="20rpx"></u-icon>
								</view> -->
							</u-cell>
						</view>

						<view class="CommonCard_Main">

							<view class="LineBox" v-for="(item,index) in FisishData" :key="index">
								<view class="x-f TextBox">
									<view class="Line_Left" style="flex: 1;">
										<text>{{item.ProductName}}</text>
									</view>

									<view class="Line_Right">
										<text>{{item.WCQty}}</text>
									</view>
								</view>

								<view style="padding-bottom: 30rpx;border-bottom: 2px solid #f7f7f7;">
									<u-line-progress :percentage="(item.WCQty / item.FPlanQty)"
										activeColor="#3ed27e"></u-line-progress>
								</view>
							</view>

							<u-empty v-if="!FisishData.length" mode="data" text="暂无数据"
								icon="/static/image/Img/history.png" width="40vw" height="40vw" textSize="28rpx">
							</u-empty>
						</view>
					</view>


					<!-- 工序执行进度 -->
					<view class="CommonCardBox">
						<view class="CommonCard_TopBox">
							<u-cell title="工序执行进度" :border="false"
								:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
								<view slot="icon">
									<view class="CommonCard_TitleLeftIcon GXIconBac">
										<u-icon size="32rpx" name="/static/image/Icon/GXZXJD.png"></u-icon>
									</view>
								</view>

								<!-- <view slot="value" class="u-slot-value x-f CommonCard_RightBox">
									<text class="Text">查看</text>
									<u-icon name="arrow-right" color="#51d0d0" size="20rpx"></u-icon>
								</view> -->
							</u-cell>
						</view>

						<view class="CommonCard_Main">

							<view class="charts-box">
								<qiun-data-charts type="mix" :opts="opts" :ontouch="true" onzoom :chartData="chartData">

								</qiun-data-charts>
							</view>

							<!-- <u-empty mode="data" text="暂无数据" icon="/static/image/Img/history.png" width="40vw" height="40vw"
							textSize="28rpx">
						</u-empty> -->
						</view>
					</view>



					<!-- 员工报工排行 -->
					<view class="CommonCardBox">
						<view class="CommonCard_TopBox">
							<u-cell title="员工报工排行" :border="false"
								:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
								<view slot="icon">
									<view class="CommonCard_TitleLeftIcon YGBGPHIconBack">
										<u-icon size="32rpx" name="/static/image/Icon/YGBGPH.png"></u-icon>
									</view>
								</view>

								<!-- <view slot="value" class="u-slot-value x-f CommonCard_RightBox">
									<text class="Text">查看</text>
									<u-icon name="arrow-right" color="#51d0d0" size="20rpx"></u-icon>
								</view> -->
							</u-cell>
						</view>

						<view class="CommonCard_Main">

							<view style="padding: 10rpx 20rpx;">
								<u-cell>
									<view slot="title">
										<text style="color: #999;">排名</text>
									</view>
									<view slot="value">
										<text style="color: #999;">数量</text>
									</view>
								</u-cell>


								<u-cell BottomColor="#f3f3f3" v-for="(item,index) in rankingData"
									:key="item.FProcessMan">
									<view slot="title" class="x-f">
										<u-icon v-if="index <= 2" size="52rpx"
											:name="FormateBackFun('rank',index)"></u-icon>
										<view v-else
											style="font-size: 36rpx;width: 52rpx;text-align: center;color: #17d56b;">
											{{index + 1}}
										</view>
										<text
											style="color: #333;font-size: 28rpx;margin-left: 24rpx;">{{item.EmplName}}</text>
									</view>
									<view slot="value">
										<text style="color: #ffb803;font-size:  28rpx;">{{item.FSumQty}}</text>
									</view>
								</u-cell>
							</view>

							<u-empty v-if="!rankingData.length" mode="data" text="暂无数据"
								icon="/static/image/Img/history.png" width="40vw" height="40vw" textSize="28rpx">
							</u-empty>
						</view>
					</view>

				</view>

				<template #bottom>
					<zdy-tabbar style="width: 100%;" :current-page="currentID"></zdy-tabbar>
				</template>

			</z-paging>


		</view>

		<m-permission ref="permissionDialog" title="相机/相册权限申请说明">ces</m-permission>

		<!-- 实时播报 -->
		<u-popup class="Common_Popup" :show="BroadcastPopup" mode="bottom" :round="12" zIndex="9999999"
			@close="closeBroadcastPopup">
			<view class="f-dc" style="height: 80vh;">
				<u-navbar :fixed="false" title="实时播报" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeBroadcastPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="Common_Popup_MainBox">
					<m-step :options="RollList">
						<template v-slot:CardBox="{ element, index }">
							<!-- 在这里定义 CardBox 的内容 -->
							<view style="padding: 30rpx 20rpx;min-height: 100px;">
								<view class="x-f"
									style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
									<text style="font-size: 32rpx;color: #333;">{{element.EmplName}}</text>
									<text
										style="font-size: 32rpx;color: #333;margin-left: 6rpx;">{{element.ProcedureName}}</text>
								</view>

								<view>
									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="工单号:" :value="element.BGBillNO" valueColor="#999">
									</m-field>

									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="产品信息:" :value="element.ProductName"
										valueColor="#999"></m-field>

									<view class="x-f">
										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="良品数量:" :value="element.FDailyQtt"
											valueColor="#2ea77e"></m-field>

										<view style="margin: 0 4rpx;color: #999;font-size: 26rpx;">/</view>

										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="不良品数量:" :value="element.FNgQty"
											valueColor="#d54844"></m-field>

									</view>

								</view>
							</view>
						</template>
					</m-step>

					<u-empty v-if="!RollList.length" mode="data" text="暂无数据" icon="/static/image/Img/history.png"
						width="40vw" height="40vw" textSize="28rpx">
					</u-empty>

				</view>
			</view>
		</u-popup>


		<!-- 看板注释 -->
		<u-popup class="Common_Popup" :show="OpenTipsPopup" mode="bottom" :round="12" zIndex="9999999"
			@close="closeTipsPopup">
			<view class="f-dc" style="max-height: 80vh;">
				<u-navbar :fixed="false" title="提示" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeTipsPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="Common_Popup_MainBox" style="padding: 34rpx 30rpx;">
					<view class="Common_Card" v-for="(item,index) in TipsTextBox" :key="index">
						<view class="Common_Card_title">
							<text>{{item.Title}}</text>
						</view>
						<view class="Common_Card_Text">
							{{item.Text}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	// 看板
	export default {
		data() {
			return {
				FCJType: null, // 查询公司报工类型
				currentID: null, // 底部栏选中项值
				subsectionList: ['今天', '昨天', '前七天'],
				current: 0,

				PickerIndex: 1, // 时间弹层的层级
				StartDate: null, // 限制开始时间
				EndDate: Date.now(), // 结束时间
				singleTimes: [new Date(), new Date()], // 日期选择控件

				TimeType: '', // 区分时间 start - 开始 ， end - 结束
				ChoiceData: {
					text: '未审核',
					value: 0,
				},
				radioOptions: [{
						text: '未审核',
						value: 0,
					},
					{
						text: '已审核',
						value: 1,
					}
				],

				ModleList: [{ // 顶部统计模块数据
						Icon: '/static/image/Icon/Total.png',
						ShowText: '2000',
						Text: '报工总数',
						id: 1
					},
					{
						Icon: '/static/image/Icon/FinishNum.png',
						ShowText: '0',
						Text: '合格总数',
						id: 2
					},
					{
						Icon: '/static/image/Icon/percentage.png',
						ShowText: '1',
						Text: '合格率',
						id: 3
					},
					{
						Icon: '/static/image/Icon/WorkNum.png',
						ShowText: '0.00%',
						Text: '报工单数',
						id: 4
					},
				],

				RollList: [], // 轮播消息列表
				BroadcastPopup: false, // 实时播报弹层
				BroadcastOptions: [], // 实时播报数据

				// 完成数量统计
				FisishData: [], // 完成数量统计

				// 工序执行进度统计图
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: true,
					legend: {},
					// xAxis: {
					// 	disableGrid: true,
					// 	title: "单位：年"
					// },
					xAxis: {
						disableGrid: true,
						// calibration: true,
						scrollShow: true,
						itemCount: 2,
						labelCount: 12,
						lineHeight: 40,
						// min: 0,
					},
					yAxis: {
						// disabled: false,
						// disableGrid: false,
						// splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: [{
							calibration: true,
							// position: "left",
							// title: " ",
							min: 0,
						}]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},

				rankingData: [], // 员工报工排行

				OpenTipsPopup: false, // 看板注释弹层
				TipsTextBox: [{ // 看板注释展示Tips
						Title: '是否审核：',
						Text: '在选定日期范围内，查看是否审核状态下的数据汇总。'
					},
					{
						Title: '时间范围选择：',
						Text: '在选定日期范围内，查询看板数据。'
					},
					{
						Title: '报工总数：',
						Text: '在选定日期范围内，报工的总数。'
					},
					{
						Title: '合格总数：',
						Text: '在选定日期范围内，工单计划生产的产品合格数量汇总。'
					},
					{
						Title: '完成数量：',
						Text: '在选定日期范围内，工单实际产出的产品合格数量占比。'
					}, {
						Title: '报工单数：',
						Text: '在选定日期范围内，报工单生成数量。'
					},
				],
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
			};
		},
		onLoad(option) {
			var that = this;
			// console.log(JSON.stringify((option)))
			that.currentID = +option.TabbarID;


			// 查询公司报工类型
			that.FCJType = that.$store.getters.GetFCJType;

			setTimeout(() => {
				that.getTopNumsData();
			}, 50)

		},
		created() {},
		watch: {
			// ChoiceData(newVal, oldVal) {
			// 	var that = this;
			// 	that.getTopNumsData();
			// },
		},
		mounted() {
			var that = this;

			setTimeout(() => {
				that.BtnShow = true;
			}, 500)
		},
		methods: {
			async ChoiceCell(data) { // 切换审核状态
				let that = this;
				await Object.assign(that.ChoiceData, data);

				await that.getTopNumsData();
			},
			FormateBackFun(str, data) {
				if (str == 'rank') { // 员工排行
					let IconUrl = '';
					switch (data) {
						case 0:
							IconUrl = '/static/image/Icon/first.png';
							break;
						case 1:
							IconUrl = '/static/image/Icon/second.png';
							break;
						case 2:
							IconUrl = '/static/image/Icon/third.png';
							break;
						default:
							break;
					}

					return IconUrl;
				}
			},
			ChangeDate() { // 修改日期
				var that = this;
				this.PickerIndex = 1;
				that.getTopNumsData();
			},
			dateFormat(val, Type = 'Y-MM-dd') { // 格式化时间
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), Type);
				} else {
					return that.Request.dateFormat(new Date(), Type);
				}
			},
			getTopNumsData() { // 获取顶部看板数据
				let that = this;

				that.$utils.showLoading();
				try {
					let obj = {
						Approve: that.ChoiceData.value,
						FCJType: that.FCJType,
						FSDate: that.dateFormat(that.singleTimes[0]),
						FEDate: that.dateFormat(that.singleTimes[1]),
					};


					that.Request.request('XGD_BulletinBoard', obj, function(ret) {
						if (ret.status == 200) {
							// 顶部看板数据
							that.ModleList[0]['ShowText'] = ret.data.ds[0]['FSumQty'];
							that.ModleList[1]['ShowText'] = ret.data.ds[0]['FDailyQtt'];
							that.ModleList[2]['ShowText'] = (ret.data.ds[0]['OKRate']).toFixed(2) + '%';
							that.ModleList[3]['ShowText'] = ret.data.ds[0]['BGDNum'];

							// console.log(ret.data.ds1)

							// 播报信息
							that.RollList = ret.data.ds1.map(item => {
								return {
									...item,
									title: item['EmplName'] + ' ' + item['ProcedureName'],
									time: that.dateFormat(item.BillDate, 'Y-MM-dd hh:mm'),
									Date: that.dateFormat(item.BillDate, 'Y-MM-dd hh:mm'),
								}
							})

							// 完成数量统计
							that.FisishData = ret.data.ds2.slice(0, 5);

							// 工序执行进度
							that.getServerData(ret.data.ds3);

							// 员工报工排行
							// 按FSumQty排序
							ret.data.ds4.sort((a, b) => parseFloat(b.FSumQty) - parseFloat(a.FSumQty));
							that.rankingData = ret.data.ds4.slice(0, 5);


							setTimeout(() => {
								that.$refs.paging.endRefresh()
							}, 100)

						} else {

							that.$refs.paging.endRefresh()
						}
						that.$utils.hideLoading(500);
						// console.log(JSON.stringify(ret.data.ds3))
					})

				} catch (e) {
					that.$utils.hideLoading(500);
					that.$refs.paging.endRefresh()
					//TODO handle the exception
				}
			},

			openPermissionDialog() {
				const type = 'CAMERA' // 权限名称，其他权限看下面文档
				this.$refs.permissionDialog.requestPermission(type).then(() => {
					// 完成授权流程，开始业务代码
				})
				// this.$refs.permissionDialog.open()
			},
			getServerData(data) {
				let categories = [],
					FPlanQty = [],
					FDailyQtt = [],
					FNgQty = []
				data.forEach(item => {
					categories.push(item.ProcedureName)
					FPlanQty.push(item.FPlanQty)
					FDailyQtt.push(item.FDailyQtt)
					FNgQty.push(item.FNgQty)
				})

				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: categories,
					series: [{
							name: "计划数",
							// index: 1,
							type: "FPlanQty",
							// style: "line",
							type: "column",
							color: "#5470c6",
							data: FPlanQty
						},
						{
							name: "良品数",
							// index: 1,
							type: "column",
							color: "#2fc25b",
							data: FDailyQtt
						},
						{
							name: "不良品数",
							// index: 1,
							type: "column",
							color: "#ff6d33",
							data: FNgQty
						},
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			sectionChange(index) { // 切换分段器
				this.current = index;
			},
			openBroadcastPopup() { // 打开实时看板弹层
				this.BroadcastPopup = true;
			},
			closeBroadcastPopup() { // 关闭实时看板弹层
				this.BroadcastPopup = false;
			},
			dragBtnClick() { // 点击悬浮按钮
				// console.log(1)
				setTimeout(() => {
					this.OpenTipsPopup = true;
				}, 50)
			},
			closeTipsPopup() { // 关闭看板注释弹层
				this.OpenTipsPopup = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.Common_Popup {
		background-color: #f2f2f2;

		.Common_Popup_MainBox {
			flex: 1;
			overflow: auto;
			padding-bottom: 20px;

			.Common_Card {
				margin-bottom: 34rpx;
				letter-spacing: 1px;

				.Common_Card_title {
					font-size: 28rpx;
					color: #333;
				}

				.Common_Card_Text {
					color: #999;
					font-size: 28rpx;
					margin-top: 10rpx;
					line-height: 42rpx;
				}
			}

			// 实时播报
			.m-step {

				.m-field {
					margin-top: 3rpx;
				}
			}

		}
	}

	.content {
		height: 100vh;
		background-color: #f2f2f2;
		// display: flex;
		// flex-direction: column;
		// align-items: center;


		// 时间
		.example-body {
			width: 100%;
			padding: 6px 20px;
			color: #fff;
			background-color: #51d0d0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.uni-date {
				background-color: #fff;

				.uni-date-editor--x {
					background-color: #fff !important;
				}

				.uni-date__icon-clear {
					background-color: #fff !important;
				}
			}

			.BtnBox {
				margin-left: 8rpx;
			}
		}

		// 分段器
		.u-subsection {
			height: 100rpx !important;
			padding: 18rpx;
			border-radius: 12px !important;

			.u-subsection__bar {
				border-radius: 12px !important;
			}
		}

		.MainBox {
			padding: 28rpx 20rpx;
			// flex: 1;
			// overflow: auto;
			// width: 100%;

			.ItemCard {
				width: 22%;
				border-radius: 12px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40rpx 0;
			}


			.CommonCardBox {
				padding: 20rpx;
				min-height: 200px;
				background-color: #fff;
				border-radius: 12px;
				margin-top: 24rpx;


				.CommonCard_TitleLeftIcon {
					padding: 8rpx;
					border-radius: 18rpx;
				}

				.FinishIconBac {
					background-color: rgba(132, 222, 13, .1);
				}

				.GXIconBac {
					background-color: rgba(165, 111, 233, .1);
				}

				.YGBGPHIconBack {
					background-color: rgba(244, 234, 42, .1);
				}

				.BLPFBIconBack {
					background-color: rgba(255, 111, 111, .1);
				}


				.CommonCard_RightBox {

					.Text {
						color: #51d0d0;
						margin-right: 6rpx;
						font-size: 24rpx;
					}

					.u-icon {
						font-weight: 600;
					}
				}

				.CommonCard_Main {
					padding-bottom: 20rpx;

					.LineBox {
						padding: 20rpx 30rpx;

						.TextBox {
							justify-content: space-between;
							font-size: 28rpx;
							margin-bottom: 24rpx;
						}

						.Line_Left {
							color: #757575;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.Line_Right {
							min-width: 64rpx;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>